<template>
    <h1>renderComponentTest</h1>
    <button @click="handleDestory"> destory</button>
    <div ref="container">
        
    </div>
</template>
<script setup lang='ts'>
import { onMounted, ref } from 'vue';
import { renderComponent } from '~@/untils/UtilVue';
import Icon from '~@/components/Icon/index.vue'

    ////#region defineXxx
    //defineOptions({
        //name:
    //});

    //const props=defineProps({
        //propA:{
            //type:String,
            //required:true
        //},
        //propB:{
            //type:Number,
            //default:1
        //},
        //propC:{
            //type:String as PropType<MyType>,
            //required:true
        //},
    //});

    //const emit = defineEmits<{
        //event1:[para1:number,para2:string],
        //event2:[para1:number,para2:string],
    //}>();
    ////#endregion
    const container=ref<HTMLDivElement>();
    const props={
        type:'home',
        size:200
    }
    const component=renderComponent(Icon,props);
    onMounted(()=>{
        container.value?.appendChild(component.vnode!.el as Node);
    })

    const handleDestory=()=>{
        component.myUnmounted();
    }
   
</script>
<style lang='less' scoped>
    
</style>